<html>
	<head>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "f2625de73f7b532ed56c5c09f5044086",
			};
		</script>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>驾车路线规划</title>
		<style type="text/css">
			html,
			body,
			#container {
				width: 100%;
				height: 90%;
			}
		</style>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=0ca50c1e80aa23d98709b6b47ff387af&plugin=AMap.Driving"></script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
	</head>
	<body>
		<div id="container"></div>
		<div id="container2" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
			<div id="textarea1" style="font-size: 20px;margin: 10px;font-weight: 800;"></div>
			<div id="textarea2" style="font-size: 30px;margin: 10px;font-weight: 800;color: green;"></div>
		</div>

		<script type="text/javascript">
			function fetchData() {
				fetch('https://b462x83122.vicp.fun/plate/getNumber')
					.then(response => response.json())
					.then(data => {
						if (data.code === 200) {
							document.getElementById('textarea1').textContent = '总车位:' +
								`${parseInt(data.data[0].plateCount)+parseInt(data.data[0].leftCount)}`
							document.getElementById('textarea2').textContent = '空车位: ' + data.data[0].leftCount

						}
					})
					.catch(error => {
						console.error('Request failed: ', error);
						document.getElementById('container2').textContent = 'Error: ' + error.message;
					});
			}


			var map = new AMap.Map("container", {
				resizeEnable: true,
				zoom: 12
			});
			AMap.plugin('AMap.Geolocation', function() {
				var geolocation = new AMap.Geolocation({
					enableHighAccuracy: true,
					timeout: 10000,
					panToLocation: false,
					position: 'RB',
					offset: [2, 2],
					zoomToAccuracy: true,
				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition(function(status, result) {
					if (status == 'complete') {
						onComplete(result, map);
					} else {
						console.log(result);
					}
				});
			});

			function onComplete(data, map) {
				var driving = new AMap.Driving({
					map: map,
					autoFitView:true
				});
				// 39.88885747471139, 116.68369734269797
				driving.search(new AMap.LngLat(data.position.lng, data.position.lat), new AMap.LngLat(116.68369734269797,
					39.88885747471139), function(status, result) {
					if (status === 'complete') {
						console.log('绘制驾车路线完成');
					} else {
						console.error('获取驾车数据失败：' + result);
					}
				});
				fetchData();
			}


			function gx() {
				var elements = document.getElementsByClassName('amap-control amap-geolocation');
				elements[0].click();
			}
			setInterval(gx, 3000);
		</script>

	</body>
</html>